<!--
 * @author: sanbao
 * @Date: 2022-07-23 10:50:24
-->
<style lang='scss' scoped>
</style>

<template>
  <div class="my_top">
    <el-form :inline="true" :model="form">
      <template v-for="(item, index) in toplist">
        <!-- 输入框 -->
        <el-form-item v-if="item.type == 'input'">
          <el-input
            class="input-with-select"
            v-model.trim="form[item.model]"
            :placeholder="item.label"
          >
            <template #append>
              <el-button @click="handeltopbutton(item.action)">Q</el-button>
            </template>
          </el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item v-if="item.type == 'action'">
          <el-button
            v-for="(v, i) in item.list"
            :key="i"
            :type="v.type"
            @click="handeltopbutton(v.action)"
          >
            {{ v.name }}
          </el-button>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, reactive, toRefs, computed } from "vue";
export default defineComponent({
  props: {
    toplist: {
      type: Array,
      default: [],
    },
  },
  components: {},
  setup(props, { emit }) {
    const data = reactive({
      form: {},
    });
    const handeltopbutton = (action: any) => {
      emit("handeltopbutton", { action, topVal: data.form });
    };
    return {
      ...toRefs(data),
      handeltopbutton,
    };
  },
});
</script>
